<template>
	<view id="wk">
		<!-- 剧本主页 -->
		<view>
			<view id="quxiao">
				<uni-search-bar @confirm="search" v-model="searchValue" bgColor="#F1E8F5;"
					clearButton="auto" placeholder="请输入剧本名称">
				</uni-search-bar>
			</view>

			<!-- 选择类型 -->
			<view class="choose">
				<view>
					人数
					<text class="quanbu" @click="btn">全部</text>
					<view class="rensu" v-for="(a,b) in people" :key="b">
						<text @click="searchScript(a)">{{a.peopleCount}}人</text>
					</view>
				</view>

				<view>
					题材
					<text class="quanbu" @click="btn">全部</text>
					<scroll-view class="scroll-view_H" show-scrollbar="true" scroll-x="true" @scroll="scroll">
						<view class="ticai" v-for="(a,b) in topic" :key="b">
							<text @click="searchScript(a)">{{a.themeName}}</text>
						</view>
					</scroll-view>
				</view>

				<view>
					难度
					<text class="quanbu" @click="btn">全部</text>
					<view class="nandu" v-for="(a,b) in levelList" :key="b">
						<text @click="searchScript(a,b)">{{a}}</text>
					</view>
				</view>

				<!-- <view>
					排序
					<text class="quanbu">默认</text>
					<text class="paixu">推荐</text>
					<text class="paixu">热门</text>
					<text class="paixu">最新</text>
					<text class="paixu">评分</text>
				</view> -->
			</view>

			<!-- 转发，二维码 按钮 -->
			<view>
				<button class="buttn" open-type="share" data-list="{{booklnfo}}">
					<text class="iconfont icon-31zhuanfa"></text>
				</button>

				<button class="butn" @click="open"><text class="iconfont icon-erweima"></text></button>
				<uni-popup ref="popup">
					<image :src="press" :show-menu-by-longpress="true" style="height: 650rpx;"></image>
				</uni-popup>
			</view>

			<!-- 剧本总数量 -->
			<view class="geshu">
				<text>--共<text>{{screenplay.length}}</text>个剧本-- </text>
			</view>

		</view>

		<!-- 剧本详情容器 -->
		<view class="boxes">
			<view v-for="(i,v) in screenplay" :key="v" class="box" @click="tiaozuan(i.id)">
				<image :src="'http://124.220.177.66:8082'+i.scriptUrl"></image>

				<view class="font">
					<text class="mangd">{{i.scriptName}}</text>
					<text class="yinhe">{{i.themeName}}</text>
					<text class="zit">{{i.scriptDescribe}}</text>
					<text class="shif" style="margin-top: 10rpx">{{i.scriptPrice}}分</text>
					
					<view class="zit" style="margin-top: 6rpx">
						<text><text class="iconfont icon-wode-wode"></text>{{i.peopleNum}}人</text>
						<text><text class="iconfont icon-shijian"></text>{{i.gameTime}}</text>
						<view>
							<text class="iconfont icon-chongdian"></text>
							<text v-if="i.level == '0'">简单</text>
							<text v-else-if="i.level == '1'">进阶</text>
							<text v-else="i.level == '2'">烧脑</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				screenplay: [],
				people: [],
				topic: [],
				recom: [],
				id: [],
				// level: [],
				levelList: ['简单', '进阶', '烧脑'],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				press: ''
			}
		},
		methods: {
            //横向滑动
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},

			//搜索
			search(res) {
				let a = res.value
				uni.request({
					url: "http://124.220.177.66:8082/juben/selectScriptByName",
					method: 'post',
					data: {
						scriptName: a
					},
					success: (res) => {
						//console.log(res);
						if (res.data.code == 200) {
							this.screenplay = res.data.data
							//console.log(res.data.data);
						}
					},
				})
			},
			//打开二维码
			open() {
				uni.request({
					url: "http://124.220.177.66:8082/juben/getStore",
					success: (res) => {
						this.$refs.popup.open('center')
						//console.log(res);
						this.press = "http://124.220.177.66:8082" + res.data.data[0].QRcode
						
					},
				})
			},
			
			//获取全部剧本数据
			getScript() {
				uni.request({
					url: "http://124.220.177.66:8082/juben/getAllScript",
					success: (res) => {
						this.screenplay = res.data.data
						//console.log(res.data.data);
						this.id = res.data.data.id
					},
				})
			},

			//获取人数
			getPeople() {
				uni.request({
					url: "http://124.220.177.66:8082/juben/getScriptPeopleCount",
					success: (res) => {
						//console.log(res)
						this.people = res.data.data
						this.stat = true
					}
				})
			},

			//获取主题数据
			getTopic() {
				uni.request({
					url: "http://124.220.177.66:8082/juben/getScriptTheme",
					success: (res) => {
						//console.log(res)
						this.topic = res.data.data
					}
				})
			},

			//查询剧本难度 
			// getLevel() {
			// 	uni.request({
			// 		url: "http://124.220.177.66:8082/juben/getScriptLevel",
			// 		success: (res) => {
			// 			//console.log(res)
			// 			this.level = res.data.data
			// 		}
			// 	})
			// },

			//跳转页面
			tiaozuan(id) {
				//console.log(id);
				uni.navigateTo({
					url: '/pages/script/scriptDetails/scriptDetails?id=' + id
				});
			},

			//多条件查询
			searchScript(a, b) {
				//console.log('多条件查询',b);
				uni.request({
					url: "http://124.220.177.66:8082/juben/conditionSelectScript",
					method: 'post',
					data: {
						peopleNum: a.peopleCount,
						level: b,
						themeName: a.themeName
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.screenplay = res.data.data
						}
					},
				})
			},

			//全部
			btn() {
				this.getScript()
			}
		},
		created() {
			this.getScript()
			this.getPeople()
			this.getTopic()
			// this.getLevel()
		},
	}
</script>

<style lang="scss">
	@import url('~@/static/iconfont/iconfont.css');
	page{
	    background: #0D141F;
		height: 100%;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 500rpx;
		margin-left: 170rpx;
		margin-top: -68rpx;
	}

	#quxiao {
		text {
			color: #787879;
		}
	}
//转发，二维码-----------------------------
	.buttn {
		background-color: #20252D;
		width: 80rpx;
		height: 70rpx;
		margin-left: 500rpx;
		border-radius: 20rpx;
		padding: 0;//按钮自带内边距，去掉
	}

	.icon-31zhuanfa {
		color: aliceblue;
		font-size: 53rpx;
		line-height: 68rpx;
		margin-left: 6rpx;
	}

	.butn {
		background-color: #20252D;
		width: 80rpx;
		height: 70rpx;
		margin-left: 620rpx;
		margin-top: -70rpx;
		border-radius: 20rpx;
		padding: 0;//按钮自带内边距，去掉
	}

	.icon-erweima {
		color: aliceblue;
		font-size: 53rpx;
		line-height: 65rpx;
		margin-left: 3rpx;
		
	}
//尾----------------------------------------------

	.geshu {
		color: #787879;
		width: 750rpx;
		text-align: center;
		font-size: 27rpx;

		text {
			display: inline-block;
		}
	}
	
//选择类型----------------------------------------
	.choose {
		color: #787879;
		margin-left: 25rpx;

		view {
			margin-top: 20rpx;
		}
	}

	.quanbu {
		color: #A488FB;
		display: inline-block;
		text-align: center;
		line-height: 50rpx;
		width: 90rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background-color: #332D39;
	}

	.rensu {
		display: inline-block;
		text-align: center;
		line-height: 46rpx;
		width: 90rpx;
		height: 50rpx;
		border-radius: 10rpx;

		&:hover {
			color: #A488FB;
			background-color: #332D39;
		}
	}

	.ticai {
		display: inline-block;
		text-align: center;
		line-height: 46rpx;
		width: 90rpx;
		height: 50rpx;
		border-radius: 10rpx;

		&:hover {
			color: #A488FB;
			background-color: #332D39;
		}
	}

	.nandu {
		display: inline-block;
		text-align: center;
		line-height: 46rpx;
		width: 90rpx;
		height: 50rpx;
		border-radius: 10rpx;

		&:hover {
			color: #A488FB;
			background-color: #332D39;
		}
	}


	.paixu {
		display: inline-block;
		margin: 0 9rpx;
	}
//尾--------------------------------------------

	.outline {
		width: 750rpx;
		height: 100%;
	}

	text {
		display: block;
	}

//剧本详情------------------------------------------
	.boxes {
		width: 750rpx;
	}

	.box {
		overflow: hidden;
		width: 720rpx;
		height: 350rpx;
		background-color: #232433;
		border-radius: 20rpx;
		margin: 25rpx auto;

		image {
			float: left;
			width: 250rpx;
			height: 320rpx;
			border-radius: 20rpx;
			margin-top: 15rpx;
			margin-left: 15rpx;
		}
	}

	.font {
		float: left;
		width: 430rpx;
		height: 300rpx;
		margin-left: 20rpx;
		margin-top: 8rpx;
		font-size: 27rpx;

		text {
			padding: 5rpx 0;
		}
	}

	.yinhe {
		color: #937ADA;
	}

	.shif {
		text-align: center;
		font-size: 25rpx;
		border-radius: 8rpx;
		color: #937ADA;
		width: 85rpx;
		height: 35rpx;
		line-height: 35rpx;
		background-color: #332D39;
	}

	.mangd {
		color: aliceblue;
		font-size: 35rpx;
	}

	.zit {
		overflow: hidden;
		color: #5A576E;
		display: inline-block;
		//多行隐藏省略
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;

		text {
			float: left;
		}
	}

	.icon-wode-wode {
		color: #FF6E19;
	}

	.icon-shijian {
		color: #A488FB;
		margin-left: 25rpx;
	}

	.icon-chongdian {
		color: #5990FD;
		margin-left: 25rpx;
	}
//尾-----------------------------------------
	
</style>
